<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>新增建议</title>
		<!-- 引入样式文件 -->
		<link rel="stylesheet" href="../../common/css/vant-index.css" />
		<link rel="stylesheet" href="../../common/css/common.css" />

		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<style>
			.container {
				width: 6.46rem;
				/* height: 4.76rem; */
				background: #ffffff;
				box-shadow: 0rem 0.08rem 0.2rem 0rem rgba(0, 0, 0, 0.302);
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				opacity: 1;
				margin: 0.36rem 0.3rem;
				overflow: hidden;
				padding: 0 0.22rem;
			}
			.van-cell {
				padding-left: 0;
				padding-right: 0;
			}
			.align_item .van-cell__value {
				display: flex;
				justify-content: flex-end;
			}
			.align_item {
				align-items: center;
			}
			textarea {
				background: #f7f8fa;
				border: none;
				width: 6.1rem;
				height: 1.5rem;
				border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
				padding: 0.16rem;
			}
			.num {
				position: absolute;
				right: 0.16rem;
				bottom: 0.16rem;
			}
			.btn {
				width: 3rem;
				height: 0.8rem;
				border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
			}
			.van-row {
				line-height: 0.38rem;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="container">
				<div style="line-height: 0.88rem; color: #005bac; font-size: 0.28rem">
					饮食得分
				</div>
				<div>
					<span style="font-size: 0.28rem; margin-right: 0.26rem">饮食合理</span
					><van-rate v-model="rate1" color="#D9A71F"></van-rate>
					<span
						style="font-size: 0.28rem; margin-left: 0.26rem"
						:style="rateColor1"
						>{{rateScore(rate1)}}</span
					>
				</div>
				<div style="line-height: 0.88rem; font-size: 0.28rem">评分说明：</div>
				<div style="font-size: 0.24rem; color: rgba(0, 0, 0, 0.6)">
					<van-row>
						<van-col span="6">很好（5分）：</van-col>
						<van-col span="18">饮食颜色、结构、摄入量完美</van-col>
					</van-row>
					<van-row>
						<van-col span="6">较好（4分）：</van-col>
						<van-col span="18">饮食结构、摄入量OK，颜色搭配略不足</van-col>
					</van-row>
					<van-row>
						<van-col span="6">一般（3分）：</van-col>
						<van-col span="18"
							>饮食结构、摄入量有一项不足；或有一项超标</van-col
						>
					</van-row>
					<van-row>
						<van-col span="6">较低（2分）：</van-col>
						<van-col span="18"
							>饮食结构、摄入量有一项不足；或有两项超标</van-col
						>
					</van-row>
					<van-row>
						<van-col span="6">差&nbsp;&nbsp;&nbsp;（1分）：</van-col>
						<van-col span="18"
							>饮食结构、摄入量有两项不足；或有两项超标</van-col
						>
					</van-row>
				</div>
				<div style="margin-top: 0.24rem">
					<span style="font-size: 0.28rem; margin-right: 0.26rem">烹饪方式</span
					><van-rate v-model="rate2" color="#D9A71F"></van-rate>
					<span
						style="font-size: 0.28rem; margin-left: 0.26rem"
						:style="rateColor2"
						>{{rateScore(rate2)}}</span
					>
				</div>
				<div style="line-height: 0.88rem; font-size: 0.28rem">评分说明：</div>
				<div
					style="
						font-size: 0.24rem;
						color: rgba(0, 0, 0, 0.6);
						margin-bottom: 0.24rem;
					"
				>
					<van-row>
						<van-col span="6">很好（5分）：</van-col>
						<van-col span="18"
							>蒸、焯、凉拌、炒为主，完全无油炸，适量的油、盐、醋、芝麻油、葱、姜、蒜</van-col
						>
					</van-row>
					<van-row>
						<van-col span="6">较好（4分）：</van-col>
						<van-col span="18"
							>蒸、焯、凉拌、炒为主，完全无油炸，偶尔偏油腻、偏咸、添加了鸡精、味精等不太健康的调料</van-col
						>
					</van-row>
					<van-row>
						<van-col span="6">一般（3分）：</van-col>
						<van-col span="18"
							>清炒为主，完全无油炸，有时偏油腻、口味偏浓</van-col
						>
					</van-row>
					<van-row>
						<van-col span="6">较低（2分）：</van-col>
						<van-col span="18">清炒为主，偏油腻，有油炸、口味太浓</van-col>
					</van-row>
					<van-row>
						<van-col span="6">差&nbsp;&nbsp;&nbsp;（1分）：</van-col>
						<van-col span="18">饮食油腻，有油炸、烧烤、口感特浓</van-col>
					</van-row>
				</div>
			</div>
			<div class="container" style="margin-bottom: 0.5rem">
				<van-cell-group>
					<van-cell title="从模板选择" is-link @click="handleSelect"></van-cell>
				</van-cell-group>
				<van-cell-group>
					<van-cell class="align_item" title="保存到模板">
						<van-switch
							slot="right-icon"
							:active-value="1"
							:inactive-value="0"
							v-model="checked"
						/>
					</van-cell>
				</van-cell-group>
				<div
					style="
						line-height: 0.78rem;
						font-size: 0.28rem;
						color: rgba(0, 0, 0, 0.85);
					"
				>
					建议
				</div>
				<div style="position: relative; margin-bottom: 0.22rem">
					<textarea
						v-model="advise"
						maxlength="100"
						placeholder="请输入100字以内的建议内容"
					>
					</textarea>
					<span class="num">{{advise.length||0}}/100</span>
				</div>
			</div>
			<van-action-sheet v-model:show="show" title="饮食建议">
				<van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
				>
					<div
						v-for="(item,index) in adviseList"
						style="
							font-size: 0.28rem;
							text-align: center;
							line-height: 0.4rem;
							padding: 0.12rem 0.32rem;
						"
						:key="index"
						@click="onSelect(item)"
					>
						{{item}}
					</div>
				</van-list>
			</van-action-sheet>
			<div style="margin-left: 0.32rem; margin-bottom: 0.06rem">
				<van-button
					class="btn"
					style="width: 3.3rem; margin-right: 0.32rem"
					@click="onCancel"
					>取消</van-button
				>
				<van-button
					class="btn"
					style="width: 3.3rem; background-color: #005bac; color: #ffffff"
					@click="onSubmit"
					>确定</van-button
				>
			</div>
		</div>
	</body>
	<!-- viewer 图片预览 -->
	<script src="../../common/js/vue.min.js"></script>
	<script src="../../common/js/axios.min.js"></script>
	<script src="../../common/js/vue.global.prod.js"></script>
	<script src="../../common/js/vant.min.js"></script>
	<script src="../../common/js/rem.js"></script>
	<script src="../../common/js/index.umd.js"></script>
	<script src="../../base.js"></script>
	<script src="../../common/js/url.min.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			getUrl,
			spliceUrl,
		} from '../../common/js/api/vue3-axios-utils.js'

		const app = Vue.createApp({
			data() {
				return {
					checked: 0,
					advise: '',
					show: false,
					rate1: 0,
					rate2: 0,
					adviseList: [],
					loading: false,
					finished: false,
				}
			},
			computed: {
				rateColor1() {
					if (this.rate1 == 1 || this.rate1 == 2) {
						return 'color:#D9321F'
					} else if (this.rate1 == 3 || this.rate1 == 4) {
						return 'color:#D9A71F'
					} else if (this.rate1 == 5 || this.rate1 == 6) {
						return 'color:#1FD944'
					} else {
						return ''
					}
				},
				rateColor2() {
					if (this.rate2 == 1 || this.rate2 == 2) {
						return 'color:#D9321F'
					} else if (this.rate2 == 3 || this.rate2 == 4) {
						return 'color:#D9A71F'
					} else if (this.rate2 == 5 || this.rate2 == 6) {
						return 'color:#1FD944'
					} else {
						return ''
					}
				},
			},
			created() {
				this.pid = url('?userid')
			},
			methods: {
				rateScore(rate) {
					switch (rate) {
						case 1:
							return '差'
							break
						case 2:
							return '较低'
							break
						case 3:
							return '一般'
							break
						case 4:
							return '较好'
							break
						case 5:
							return '很好'
							break
					}
				},
				handleSelect() {
					this.show = true
					postAction(spliceUrl('/201/02/2010217'), { signinType: 5 }).then(
						res => {
							res = res.data
							if (res.success) {
								this.adviseList = res.result
							} else {
								this.$toast.fail({
									duration: 0,
									message: res.message,
								})
							}
						}
					)
				},
				onSelect(item) {
					this.advise = item
					this.show = false
				},
				onCancel() {
					history.back()
					// window.location.href = document.referrer
				},
				check() {
					if (!this.rate1) {
						this.$toast.fail('饮食合理请评分！')
						return false
					}
					if (!this.rate2) {
						this.$toast.fail('烹饪方式请评分！')
						return false
					}
					if (!this.advise) {
						this.$toast.fail('请填写建议！')
						return false
					}
					return true
				},
				onSubmit() {
					if (!this.check()) return
					const id = url('?id')
					const params = {
						signinType: 5,
						recordId: id,
						suggestDoctorId: localStorage.did,
						patientId: localStorage.pid,
						suggest: this.advise,
						score: `${this.rate1},${this.rate2}`,
						orgCode: sessionStorage.orgCode,
						saveToTemplate: this.checked ? 1 : 0,
					}
					postAction(spliceUrl('/signin/suggest/save'), params).then(res => {
						res = res.data
						if (res.success) {
							// history.back()
							window.location.href = document.referrer
						} else {
							this.$toast.fail(res.message)
						}
					})
				},
				onClickLeft() {
					window.location.href = '../dailyIndex.html?userid=' + localStorage.pid
				},
				onClickRight() {
					window.location.href = '../index.html?userid=' + localStorage.pid
				},
			},
		})
		app.use(vant)

		app.use(vant.Lazyload)
		app.use(VueViewer.default)

		app.mount('#app')
	</script>
</html>
